<template>
	<loading-page v-if="data.loading" :transparent="data.loadingTransparent" />
	<!-- 个人信息展示 -->
	<view class="header">
		<view class="inner" @click="navToCheckLogin(setNavUrl)">
			<view class="avatar">
				<lazy-load-image class="img" :image="$store.getters.userInfo.img" :avator="true" :errorImg="config.errorImage.avator" imgMode='aspectFill' height="118rpx" borderRadius="59" />
				<icon :class="['iconfont icon','icon-auth-'+$store.getters.userInfo.auth]" v-if="$store.getters.userInfo.is_merchant&&$store.getters.userInfo.auth">&#xe796;</icon>
			</view>
			<view class="info">
				<text class="name">{{$store.getters.userInfo.nickname?$store.getters.userInfo.nickname:'登录/注册'}}</text>
				<text class="desc">{{$store.getters.userInfo.introduce||$store.getters.token?$store.getters.userInfo.introduce?$store.getters.userInfo.introduce:'暂无介绍~':'立即登录享有更多权限'}}</text>
			</view>
		</view>
	</view>
	<!-- 用户模块 -->
	<module-consumer :recommoned="data.recommoned" v-if="['user',''].indexOf($store.getters.role)>-1" @navToCheckLogin="navToCheckLogin" />
	<module-merchant v-else @navToCheckLogin="navToCheckLogin" />
	<!-- 最新悬赏 -->
	<view class="needs">
		<view class="hd">
			<view class="title">
				<text>最新悬赏</text>
			</view>
			<navigator class="more" url="/pages/task/task" open-type="switchTab" :hover-stop-propagation="true">
				<text>查看全部</text>
				<icon class="iconfont icon">&#xe7d3;</icon>
			</navigator>
		</view>
		<new-needs :list="data.needs" />
	</view>
	<!-- 底部 -->
	<view class="foot">
		<view class="mobile">
			<icon class="iconfont icon">&#xe7b4;</icon>
			<view class="number">
				<text class="title">联系客服</text>
				<text class="num">{{config.customer.mobile}}</text>
			</view>
		</view>
		<view class="btns">
			<button type="default" class="btn" hover-class="btnClickStyle" @click="call(config.customer.mobile)">拨打</button>
		</view>
	</view>
	<!-- 登录组件 -->
	<weixin-login ref="wxLogin" />
</template>
<script setup>
	import { ref, reactive, computed, defineComponent } from 'vue';
	import { onLoad, onShow, onTabItemTap } from '@dcloudio/uni-app';
	import { useStore } from 'vuex';
	import config from '@/uni.config.js';
	import { getRecommoned, getNewTask } from '@/common/api/mine.js';
	import useStatus from '@/common/hooks/useStatus.js';
	import newNeeds from '@/pages/index/components/new-needs.vue';
	import moduleConsumer from './components/module-consumer.vue';
	import moduleMerchant from './components/module-merchant.vue';
	const store = useStore();
	const wxLogin = ref(null);
	const { navToCheckLogin } = useStatus(wxLogin);
	defineComponent({
		newNeeds,
		moduleConsumer,
		moduleMerchant
	});
	onLoad(() => {
		init();
		setTimeout(() => {
			if (!store.getters.token && data.flag) navToCheckLogin();
		}, 600)
	});
	onShow(() => {
		data.flag = true;
		uni.$once('loginLose', () => {
			data.flag = false;
			navToCheckLogin();
		})
	});
	onTabItemTap(() => {
		if (data.loadingTransparent) init();
	});
	const setNavUrl = computed(() => {
		return ['user', ''].indexOf(store.getters.role) > -1 ? '/subpages/user-consumer/set/set' : '/subpages/user-merchant/set/set';
	});
	const data = reactive({
		loading: true,
		loadingTransparent: false,
		recommoned: {
			title: '推荐行业大牛',
			more: '更多大牛',
			list: []
		},
		needs: [],
		identity: 1,
		flag: true
	});
	// 初始化数据
	async function init() {
		data.loading = true;
		try {
			const resRecommoned = await getRecommoned();
			const resNeeds = await getNewTask();
			data.recommoned.list = resRecommoned.data;
			data.needs = resNeeds.data;
		} catch (e) {}
		data.loading = false;
		data.loadingTransparent = true;
	}
	// 拨打电话
	function call(num) {
		uni.makePhoneCall({
			phoneNumber: num,
			fail() {}
		});
	}
</script>
<style lang="scss">
	@import '@/common/css/base.scss';
	page {
		padding-bottom: 2rpx;
		background-color: $bgColor;
	}
</style>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	$w:694rpx;
	@mixin common {
		width: $w;
		margin: 0 auto 28rpx;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .08);
		border-radius: 18rpx;
		background-color: #fff;
	}
	.recommoned .hd {
		.title {
			font-weight: 500;
			font-size: 32rpx;
			color: #000;
		}
	}
	.header {
		height: 248rpx;
		padding: 14rpx 28rpx;
		background-color: $color;
		.inner {
			@include flex;
		}
		.avatar {
			position: relative;
			width: 118rpx;
			height: 118rpx;
			margin-right: 20rpx;
			.img {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			.icon {
				position: absolute;
				right: 4rpx;
				bottom: 4rpx;
				width: 30rpx;
				height: 30rpx;
				justify-content: center;
				border-radius: 50%;
				font-size: 20rpx;
				color: #fff;
			}
			.icon-auth {
				&-1 {
					background-color: #faad14;
				}
				&-2 {
					background-color: #ff4d00;
				}
			}
		}
		.info {
			flex: 1;
			.name {
				display: block;
				max-width: 420rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-size: 38rpx;
				color: #fff;
			}
			.desc {
				display: block;
				max-width: 420rpx;
				height: 32rpx;
				margin-top: 16rpx;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
	.needs {
		@include common;
		padding: 30rpx 0;
		.hd {
			@include flex;
			padding: 0 28rpx;
			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #000;
			}
			.more {
				@include flex;
				font-size: 24rpx;
				color: #aaa;
				.icon {
					margin-top: 2rpx;
					font-size: 26rpx;
				}
			}
		}
	}
	.foot {
		@include common;
		@include flex;
		padding: 12rpx 28rpx;
		.mobile {
			@include flex;
			.icon {
				margin-right: 20rpx;
				font-size: 56rpx;
				color: #333;
			}
			.number {
				@include flex(column);
				align-items: flex-start;
				.title {
					font-size: 28rpx;
					color: #333;
				}
				.num {
					font-size: 22rpx;
					color: #888;
				}
			}
		}
		.btn {
			height: 54rpx;
			line-height: 52rpx;
			border: 1px solid #ddd;
			border-radius: 6rpx;
			background: #fff;
			font-size: 28rpx;
			color: #666;
		}
	}
</style>
